<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>

	<!-- bootstrap-paginator 显示分页 -->
	<script type="application/javascript" src="../js/bootstrap-paginator.min.js"></script>

	<!-- 工具类 -->
	<script type="application/javascript" src="../js/util.js"></script>

	<!-- bootstrap-table -->
	<link href="../css/bootstrap-table.min.css" rel="stylesheet">
	<script src="../js/bootstrap-table.min.js"></script>
	<script src="../js/bootstrap-table-zh-CN.min.js"></script>

	<style type="text/css">
		#head{
			height: 100px;
			position: relative;
		}
		#form{
			background-color: black;
			width: 6%;
			font-size: 30px; 
			position: relative;
			left: 10px;
		}
		#form>img{
			vertical-align : middle;
		}
		#bodys{
			background-color: #DCDCDC;
			width: 90%;
			height: 550px;
			float: right;
			position: relative;
			bottom: 290px;
		}
		#bodys>table{
			position: relative;
			top: 10px;
			text-align: center;
			left: 7px;
			top: 5px;
			width: 99%;		}
		#flush{
			float: right;
			position: relative;
			top: 5px;
			right: 20px;
		}
		#selectdiv{
			position: absolute;
			left: 7px;
			top: 5px;
		}
		#selectdiv>button{
			position: relative;
			left: 2px;
		}
		.table-striped > tbody > tr:nth-child(even) > td{
			background-color: rgb(24, 245, 247);
		} 
		.table-striped > tbody > tr:nth-child(odd) > th {
		    background-color: rgb(242, 245, 247);
		 }
		#page{
		 	float: right;
		 	position: absolute;
		 	right: 5px;
		 	top: 530px;
		}
		#example{
			position: absolute;
			right: 5px;
			bottom: -10px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			//添加查询按钮
			var select = "<div id='selectdiv'><input type='text'><button id='select' class='btn btn-link'>查询</button></div>";
			$("#bodys").prepend("<button id='flush' class='btn btn-info'>刷新</button>").prepend(select);

			//添加分页
			$('#example').bootstrapPaginator({
	          currentPage: 5,//$( '#currentPage' ).val(),   //当前页
	          totalPages: 15,//$( '#totalPages' ).val(),     //总页数
	          numberOfPages: 5,                        //设置控件显示的页码数
	          bootstrapMajorVersion: 3,               //兼容Bootstrap3.x版本
	          tooltipTitles: function (type, page) {
	              switch (type) {
	                 case "first" :
	                     return "第一页" ;
	                 case "prev" :
	                     return "上一页" ;
	                 case "next" :
	                     return "下一页" ;
	                 case "last" :
	                     return "最后一页" ;
	                 case "page" :
	                     return page;
	             }
	             return "" ;
	         },
	         onPageClicked: function (event, originalEvent, type, page) {
	             $.get( '/Home/GetPaginationData' , { currentPage: page, pageSize:10 }, function (view) {
	                 $( '#tableTest' ).html(view);
	             });
	         }
	     });

		//添加数据
		var data = getJSONS("https://api.ziotc.com/sandbox/v1/app/list", "get", {
				"Authorization" : 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJEQ0VFMkFCODU5NEY1MDM4RkVGMkQyNTQ3MzIyREE5MUE3NEFCNiIsInNjb3BlcyI6WyJST0xFX0VOVEVSUFJJU0UiXSwiaXNzIjoiaHR0cHM6Ly9hcGkuemlvdGMuY29tIiwiaWF0IjoxNTMxODk2Nzk3LCJleHAiOjE1MzMxOTI3OTd9.9nH6yHu1XtF4yRkgIL-fkLPTH-XfEY76dzy0AZ1ATpegdPIMaVR8w-U6pH9PYMyT-IBOmBXFEJWH0-k1JC2ljg'
			}, {});
		$.each(data.data,function(key, value){
			addTable(value,["name", "sceneName", "versionNumber", "createDate", "cycleValue", "isActive", "remark"]);
		})

		//添加操作按钮
		var details = "<button id='operation_details' class='btn btn-info'>详情</button>&nbsp";
		var resert = "<button id='operation_resert' class='btn btn-danger'>重启</button>&nbsp";
		var setup = "<button id='operation_setup' class='btn btn-warning'>设置</button>&nbsp";
		for(var i=1;i<$("#bodys>table").find("tr").length;i++){
			$("#bodys>table").find("tr").eq(i).append("<td></td>");
			$("#bodys>table").find("tr").eq(i).find("td").eq(7).append(details).append(resert).append(setup);
		}
	})
	</script>
</head>
<body>
	<div id="head"></div>
	<div id="form">
		<ul class="nav nav-pills nav-stacked">
		  <li role="presentation"><a href="../index.html"><img src="../img/1.jpg">首页</a></li>
		  <li role="presentation"><a href="#">检测</a></li>
		  <li role="presentation"><a href="#">预警</a></li>
		  <li role="presentation"><a href="#">分析</a></li>
		</ul>
  	</div>
  	<div id="bodys"> 
		<table data-toggle="table" class="table table-striped table-bordered table-hover">
			<thead>
				<tr class="success">
					<th data-sortable="true">MAC</th>
					<th data-sortable="true">监测项目</th>
					<th data-sortable="true">IP</th>
					<th>备注</th>
					<th>版本号</th>
					<th>首页提示</th>
					<th>在线状态</th>
					<th>操作</th>
				</tr>
			</thead>		
		</table>

		<ul id ="example"></ul>
  	</div>

	<script type="text/javascript">
		$('#table').bootstrapTable({
		    columns: [
		        { field: 'smac', title: 'MAC', sortable: true },
		        { field: 'sproject', title: '监测项目', sortable: true},
		        { field: 'sip', title: 'IP', sortable: true },
		        { field: 'sremarks', title: '备注', sortable: true},
		        { field: 'snumber', title: '版本号', sortable: true},
		        { field: 'sindex', title: '首页提示', sortable: true},
		        { field: 'sline', title: '在线状态', sortable: true},
		    ],
		});
	</script>
</body>
</html>